<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>优田儿童成长中心</title>

    <link href="/static/assets/fontAwesome/css/fontawesome-all.min.css" rel="stylesheet">
    <link href="/static/assets/css/lib/themify-icons.css" rel="stylesheet">
    <link href="/static/assets/css/lib/mmc-chat.css" rel="stylesheet"/>
    <link href="/static/assets/css/lib/sidebar.css" rel="stylesheet">
    <link href="/static/assets/css/lib/bootstrap.min.css" rel="stylesheet">
    <link href="/static/assets/css/lib/nixon.css" rel="stylesheet">
    <link href="/static/assets/lib/lobipanel/css/lobipanel.min.css" rel="stylesheet">
    <link href="/static/assets/css/style.css" rel="stylesheet">
    <link href="/static/css/datetime.css" rel="stylesheet">
    <style>
        .input-text {
            width: 300px;
            height: 35px;
            display: inline-block;
        }
    </style>
</head>

<body>
<div class="sidebar sidebar-hide-to-small sidebar-shrink sidebar-gestures">
    <div class="nano">
        <div class="nano-content">
            <ul>
                <li>
                    <a href="/home/"><i class="ti-bar-chart"></i> 统计数据</a>
                </li>
                <li>
                    <a href="/teacher/"><i class="ti-user"></i> 教师管理</a>
                </li>
                <li class="active">
                    <a href="/child/"><i class="ti-user"></i> 幼儿管理<span
                            class="sidebar-collapse-icon ti-angle-right"></span></a>
                </li>
                <li>
                    <a href="/posts/"><i class="ti-desktop"></i> 岗位管理</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="header">
    <div class="pull-left">
        <div class="logo">
            <a>
                <img id="logoImg" src="/static/img/yt1.png" data-logo_big="/static/img/yt1.png"
                     data-logo_small="/static/img/yt3.png" alt="Nixon"/>
            </a>
        </div>
        <div class="hamburger sidebar-toggle">
            <span class="ti-menu"></span>
        </div>
    </div>
    <div class="pull-right p-r-15">
        <ul>
            <li class="header-icon dib">
                <img class="avatar-img" src="/static/assets/images/avatar/1.jpg" alt=""/>
                <span class="user-avatar"><span th:text="${session.username}"></span> <i
                        class="ti-angle-down f-s-10"></i></span>
                <div class="drop-down dropdown-profile">
                    <div class="dropdown-content-body">
                        <ul>
                            <li><a href="/exit/"><i class="ti-power-off"></i> <span>注销</span></a></li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

<div class="content-wrap">
    <div class="main">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-8 p-0">
                    <div class="page-header">
                        <div class="page-title">
                            <h1>幼儿管理</h1>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 p-0">
                    <div class="page-header">
                        <div class="page-title">
                            <ol class="breadcrumb text-right">
                                <li><a href="/child/">幼儿信息</a></li>
                                <li class="active">幼儿管理</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-content">
                <div class="row">
                    <div class="card alert">
                        <div class="card-header">
                            <input type="hidden" id="cid" th:value="${cc.cid}">
                            <h4 id="child-info">
                            </h4>
                            <div class="card-header-right-icon">
                                <input id="datetimepicker" class="form-control input-text datetimepicker-input"
                                       type="text" placeholder="请选择要查询的月份" readonly>
                                <a href="javascript:;" class="btn btn-success m-b-5 m-l-5" id="newpay">添加新缴费</a>
                                <a href="/child/" class="btn btn-warning m-b-5 m-l-5">返回</a>
                            </div>
                        </div>
                        <div class="card-body">
                            <table class="table table-responsive table-hover ">
                                <thead>
                                <tr>
                                    <th>编号</th>
                                    <th>姓名</th>
                                    <th>起始日期</th>
                                    <th>结束日期</th>
                                    <th>缴费方式</th>
                                    <th>总天数</th>
                                    <th>签到天数</th>
                                    <th>缴费总额</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody id="pay-table-body">
                                </tbody>
                            </table>
                            <nav>
                                <ul class="pagination" id="pagination">
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
            Copyright &copy; 2024
        </div>
    </div>

</div>

<script src="/static/assets/js/lib/jquery.min.js"></script>
<script src="/static/assets/js/lib/jquery.nanoscroller.min.js"></script>
<script src="/static/assets/js/lib/sidebar.js"></script>
<script src="/static/assets/js/lib/bootstrap.min.js"></script>
<script src="/static/assets/js/lib/mmc-common.js"></script>
<script src="/static/assets/js/lib/mmc-chat.js"></script>
<script src="/static/assets/js/lib/chart-js/Chart.bundle.js"></script>
<script src="/static/assets/js/lib/chart-js/chartjs-init.js"></script>
<script src="/static/assets/js/lib/datamap/d3.min.js"></script>
<script src="/static/assets/js/lib/datamap/topojson.js"></script>
<script src="/static/assets/js/lib/datamap/datamaps.world.min.js"></script>
<script src="/static/assets/js/lib/datamap/datamap-init.js"></script>
<script src="/static/assets/lib/lobipanel/js/lobipanel.js"></script>
<script src="/static/assets/js/scripts.js"></script>
<script src="/static/js/H-ui.min.js"></script>
<script src="/static/js/CryptoJS.min.js"></script>
<script src="/static/js/codes.js"></script>
<script>
    $(document).ready(function () {
        const cid = $("#cid").val();

        let currentPage = 1;
        let pageSize = 8;
        window.look = function (cid, cpid, start, end) {
            $.get('/api/v1/manager/childPay/count', {
                cid: cid,
                start: start,
                end: end
            }, function (res) {
                if (res && res.data != null) {
                    $('#num' + cpid).text(res.data); // 填入签到次数
                } else {
                    $('#num' + cpid).text('0');
                }
            });
        };

        function formatDate(dateStr) {
            if (!dateStr) return '';
            const d = new Date(dateStr);
            return d.toISOString().split('T')[0];
        }

        function getPayWayName(cpway) {
            switch (cpway) {
                case 1:
                    return '月付';
                case 2:
                    return '季度付';
                case 0:
                    return '自定义';
            }
        }

        function loadPayList(page = 1, month = '') {
            const params = {
                page: page,
                size: pageSize,
                cid: cid
            };
            if (month) {
                params.month = month;
            }

            $.ajax({
                url: '/api/v1/manager/childPay/list',
                method: 'GET',
                data: params,
                success: function (res) {
                    if (res && res.data) {
                        const list = res.data.list || [];
                        renderTable(list);
                        renderPagination(res.data.page, res.data.pages, res.data.total);
                        currentPage = res.data.page;

                        if (list.length > 0) {
                            const c = list[0];
                            const imgSrc = (c.csex === '男') ? '/static/img/boy.png' : '/static/img/gril.png';
                            const html = `<img src="${imgSrc}" width="50" class="img-circle"/> ${c.cname}`;
                            $('#child-info').html(html);
                        } else {
                            $('#child-info').html('');
                        }
                    } else {
                        alert('未获取到数据');
                    }
                },
                error: function () {
                    alert('请求缴费列表失败');
                }
            });
        }

        $('#newpay').click(function () {
            const cid = $('#cid').val();
            window.location.href = '/child_pay/add?cid=' + cid;
        });

        function renderTable(list) {
            let html = '';
            list.forEach(t => {
                let totalDays = 0;
                if (t.cpstart && t.cpend) {
                    totalDays = (new Date(t.cpend) - new Date(t.cpstart)) / (1000 * 60 * 60 * 24);
                }
                html += `<tr>
                    <th scope="row">${t.cpid}</th>
                    <td>${t.cname || ''}</td>
                    <td>${formatDate(t.cpstart)}</td>
                    <td>${formatDate(t.cpend)}</td>
                    <td>${getPayWayName(t.cpway)}</td>
                    <td class="color-info">${totalDays}</td>
                    <td><strong><span id="num${t.cpid}" class="color-primary"></span></strong>
                        <a href="javascript:;" onclick="look(${cid}, ${t.cpid}, '${formatDate(t.cpstart)}', '${formatDate(t.cpend)}')">
                            <span class="ti-notepad color-primary"></span>
                        </a>
                    </td>
                    <td><span class="color-danger">￥${t.cmoney}</span></td>
                    <td>
                        <a href="/update_childpay/?id=${t.cpid}&&cid=${cid}" class="btn btn-success m-b-10 m-l-5">编辑</a>
                        <a href="javascript:;" onclick="del(${t.cpid},${cid})" class="btn btn-danger m-b-10 m-l-5">删除</a>
                    </td>
                </tr>`;
            });
            $('#pay-table-body').html(html);

        }

        function renderPagination(current, totalPages, totalItems) {
            console.log("current =", current, "totalPages =", totalPages, "typeof current =", typeof current);
            current = parseInt(current); // ⭐ 保证 current 是数字类型
            let html = '';

            if (current > 1) {
                html += `<li class="page-item"><a class="page-link" href="javascript:;" data-page="${current - 1}">上一页</a></li>`;
            } else {
                html += `<li class="page-item disabled"><a class="page-link" href="javascript:;">上一页</a></li>`;
            }

            for (let i = 1; i <= totalPages; i++) {
                let activeClass = i === current ? 'active' : '';
                html += `<li class="page-item ${activeClass}"><a class="page-link" href="javascript:;" data-page="${i}">${i}</a></li>`;
            }

            if (current < totalPages) {
                html += `<li class="page-item"><a class="page-link" href="javascript:;" data-page="${current + 1}">下一页</a></li>`;
            } else {
                html += `<li class="page-item disabled"><a class="page-link" href="javascript:;">下一页</a></li>`;
            }

            $('#pagination').html(html);

            $('#pagination a.page-link').click(function (e) {
                e.preventDefault();
                const page = parseInt($(this).data('page'));
                if (!isNaN(page) && page !== current) {
                    loadPayList(page);
                }
            });
        }

        loadPayList(1);

        $('#datetimepicker').change(function () {
            const selectedMonth = $(this).val(); // yyyy-mm 格式
            currentPage = 1;
            loadPayList(1, selectedMonth);
        });

        $('#datetimepicker').datetimepicker({
            language: 'zh-cn',
            format: 'yyyy-mm',
            autoclose: true,
            todayBtn: true,
            todayHighlight: true,
            startView: 'year',
            minView: 'year',
            maxView: 'year'
        });
    });

    function del(cpid, cid) {
        if (!confirm('确定要删除该缴费记录吗？')) return;

        $.ajax({
            url: '/api/v1/manager/childPay/delete',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({cpid: cpid}),
            success: function (res) {
                if (res.code === 200) {
                    alert('删除成功');
                    const cid = $('#cid').val();
                    location.href = '/child_pay?cid=' + cid;
                } else {
                    alert('删除失败：' + res.message);
                }
            },
            error: function () {
                alert('请求失败，请稍后重试');
            }
        });
    }
</script>
<style>
    .copyrights {
        text-indent: -9999px;
        height: 0;
        line-height: 0;
        font-size: 0;
        overflow: hidden;
    }
</style>
<div class="copyrights">
    <h3>&copy; 版权所有 | </h3>
</div>
</body>

</html>